<template>
    <div id="car">
      <ul class="footer">
        <!-- 点击购物车出现的内容 -->
         <div  :class="{cartImg:total[shopid].tnum<=0,cartImg1:total[shopid].tnum>0,cartImg2:flag==false&&total[shopid].tnum>0}" @click="(flag=!flag && total[shopid].tnum>0)">
          <div class="ttnum" v-show="total[shopid].tnum>0">{{total[shopid].tnum}}</div>
        </div>

         <!-- 最上面的全选内容 -->
        <div class="ttmerchant" v-show="flag">
          <div class="selectAll"><i class="fa fa-check" style="color:white"></i></div>
          <span class="selectAllTxt">全选</span>
          <span class="selectMer">(已选{{total[shopid].tnum}}件，共6.87kg)</span>
          <span class="clearCar">
            <i class="fa fa-trash-o"></i>
            清空购物车
          </span>
        </div>

        <!-- 选择的商品 -->
          <div class="ovfl">
            <li class="merDesc"  v-for="merchant in car[shopid]"  :key="merchant.id"  v-show="flag">
              <div class="selectSingl"><i class="fa fa-check" style="color:white"></i></div>
              <div class="selectImg">
                <img :src="apiUrl+'/'+merchant.mImg" alt="">
              </div>
              <div class="selectContent">
                <div class="selectTitle">{{merchant.mName}}</div>
                <div class="selectPrice">
                  <div class="seleTime">秒杀</div>&nbsp;&nbsp;
                  <div>￥{{merchant.price}}</div>&nbsp;
                  <del>￥{{merchant.oprice}}</del>
                  <div class="selectComput">
                    <div v-if="merchant.snum>0" class="reducebj reducebj1">
                      <p  class="redCount" @click="reduceCar({shopid,merchInfo:merchant})">-</p>
                      <p class="selectNum">{{merchant.snum}}</p>
                    </div> 
                    <p class="mCount" @click="addCar({shopid,merchInfo:merchant})">+</p>
                  </div>
                </div>
              </div>
            </li>
          </div>
          
      </ul>

       <!-- 空购物车 -->
      <div class="cart">
        <div class="carti">
        </div>
        <div class="epyCart" v-show="total[shopid].tnum<1">购物车是空的</div>
        <div class="ttprice" v-show="total[shopid].tnum>0" :class="{ttprice1:flag==true}">￥{{total[shopid].sum}}</div>
        <div class="goAccount" :class="{goAccount1:total[shopid].tnum>0}">去结算</div>
      </div>
      <div class="ahi"></div>
      <div class="bg" v-show="flag==true" ></div>
    </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import store from "@/store/index.js";
export default {
  store,
  props: ["shopid"],

  data() {
    return {
      flag: false
    };
  },
  computed: {
    ...mapState(["car"]),
    ...mapGetters(["total"])
  },
  methods: {
    ...mapMutations(["initCar", "addCar", "reduceCar"])
  }
};
</script>
<style>
.bg{
  width:20rem;
  height: 85rem;
  background-color: rgba(0,0,0,0.8);
  position: fixed;
  top:0;
  bottom:0rem;
}
.ahi{
  position: fixed;
  bottom: 0;
  width:6rem;
  height: 3.125rem;
  z-index: 1;
  background-color: white;
}
.cartImg {
  width: 4rem;
  height: 3.125rem;
  background-image: url("/static/cart.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: 0.5rem 0rem;
  margin-bottom: -3rem;
  background-color: white;
}
.cartImg1 {
  width: 4rem;
  height: 3.125rem;
  background-image: url("/static/cart.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: 0.5rem -3.5rem;
  margin-bottom: -0.6rem;
}
.cartImg2 {
  width: 4rem;
  height: 3.125rem;
  background-image: url("/static/cart.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: 0.5rem -3.5rem;
  margin-bottom: -3rem;
}
.ttnum {
  background-color: #ff3434;
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  line-height: 1rem;
  text-align: center;
  color: white;
  font-size: 0.8rem;
  position: fixed;
  left: 2.8rem;
}
/*脚部样式*/
.footer {
  width: 100%;
  position: fixed;
  z-index: 10;
  bottom: 3.125rem;
  /*  */
}
.ovfl {
  overflow-y: auto;
}
.ttmerchant {
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 0.06rem #ddd solid;
  border-top: 0.06rem #ddd solid;
  display: flex;
  background-color: white;
}
.selectAll {
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  border: 0.06rem solid #ddd;
  border-radius: 1.2rem;
  margin: 0.6rem 0.5rem;
}
.selectMer {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  color: #999;
}
.clearCar {
  font-size: 0.7rem;
  margin-left: 2.5rem;
  color: #ccc;
  display: flex;
}
.clearCar i {
  font-size: 1.2rem;
  line-height: 2.4rem;
}
.merDesc {
  width: 100%;
  height: 4.5rem;
  border-bottom: 0.04rem solid #ddd;
  display: flex;
  background-color: white;
}
.selectSingl {
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  border: 0.06rem solid #ccc;
  border-radius: 1.2rem;
  margin: 2.2rem 0.5rem;
}
.selectImg {
  width: 3.875rem;
  height: 4.5rem;
}
.selectImg img {
  width: 3.25rem;
  height: 3.25rem;
}
.selectContent {
  width: 13.6rem;
  height: 4.5rem;
  margin-top: 0.5rem;
}
.selectTitle {
  font-size: 0.875rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selectPrice {
  display: flex;
  font-size: 0.87rem;
  color: #ff3434;
  margin-top: 0.6rem;
}
.selectPrice del {
  color: #999;
  font-size: 0.6rem;
}
.seleTime {
  background-color: #ff3434;
  /* width:rem; */
  height: 1.04rem;
  color: white;
  font-size: 0.625rem;
  border-radius: 0.4rem;
  padding: 0 0.2rem 0 0.2rem;
}
.selectComput {
  display: flex;
  margin-left: 0.5rem;
}
.selectNum {
  text-align: center;
  color: black;
  line-height: 1.75rem;
}
.reducebj1 {
  margin-right: 0.3rem;
  width: 2.6rem;
}
.cart {
  width: 75%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  z-index: 10;
  background-color: white;
  right: 0;
}
.carti {
  position: relative;
}

.epyCart {
  width: 7rem;
  height: 100%;
  font-size: 0.875rem;
  line-height: 3.125rem;
  color: #999;
  /* margin-left:1rem; */
}
.goAccount {
  width: 6.875rem;
  height: 3.125rem;
  background-color: #bdbdbd;
  color: white;
  font-size: 1rem;
  line-height: 3.125rem;
  text-align: center;
}
.goAccount1 {
  background-color: #00c625;
}
.ttprice {
  font-size: 1.375rem;
  color: #ff3434;
  line-height: 3.125rem;
}
.ttprice1 {
  font-size: 1.375rem;
  color: #ff3434;
  line-height: 3.125rem;
  position: fixed;
  left: 0.6rem;
}
</style>


